import React, { Fragment } from 'react';
import { Icon, Avatar } from 'antd';
import UploadOss from '@/components/UploadOss';
import defaultUploadAvatar from '@/assets/defaultUploadAvatar.png';
import styles from './index.less';

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

const AvatarUpload = React.forwardRef(
    (
        {
            value = {},
            size = 80,
            onChange,
            categoryCode = 'idPhoto',
            checkFileSize = 10,
            checkFileSizeMsg = '文件大小不能超过10MB！',
            checkFileType = 'JPG,JPEG,BMP,GIF,PNG',
            checkFileTypeMsg = '只能上传JPG,JPEG,BMP,GIF,PNG格式的文件！',
            ...rest
        },
        ref
    ) => {
        const { allFileList = [] } = value;
        const [imageUrl, setImageUrl] = React.useState(null);

        React.useEffect(() => {
            if (allFileList && allFileList.length > 0) {
                const lastFile = allFileList[allFileList.length - 1];
                if (lastFile.url) {
                    setImageUrl(lastFile.url);
                } else {
                    getBase64(lastFile.originFileObj, image => setImageUrl(image));
                }
            }
        }, [allFileList]);

        const changeAllFileList = (showFileList, uploadResource) => {
            if (uploadResource) {
                const { keyNameAndOpt = [] } = uploadResource;
                if (showFileList && showFileList.length > 0) {
                    keyNameAndOpt.splice(0, keyNameAndOpt.length - 1);
                    showFileList.forEach(item => {
                        if (item.keyName && !keyNameAndOpt.includes(`DELETE:${item.keyName}`)) {
                            keyNameAndOpt.push(`DELETE:${item.keyName}`);
                        }
                    });
                }
            }
            onChange({
                allFileList: showFileList,
                uploadResourceFile: uploadResource
            });
        };

        return (
            <Fragment>
                <UploadOss
                    dragAble={false}
                    ref={ref}
                    listType="picture-card"
                    uploadUrl="/api/resource/public/oss/producePutPreSignUrls"
                    checkFileSize={checkFileSize}
                    checkFileType={checkFileType}
                    sysCode="OA"
                    businessCode="SysRule"
                    categoryCode={categoryCode}
                    fileList={allFileList || []}
                    showUploadList={false}
                    uploadResource={value && value.uploadResourceFile}
                    setFileList={changeAllFileList}
                    checkFileTypeMsg={checkFileTypeMsg}
                    checkFileSizeMsg={checkFileSizeMsg}
                    {...rest}
                >
                    {/* {allFileList.length > 0 ? (
                        <Avatar size={size} icon="user" src={imageUrl} />

                    ) : (
                        <Avatar size={size} icon="user" />
                    )} */}
                    <div className={styles.uploadAvatar}>
                        <div className={styles.avatar}>
                            {allFileList.length > 0 ? (
                                <Avatar size={size} icon="user" src={imageUrl} shape="square" />
                            ) : (
                                <Avatar size={size} src={defaultUploadAvatar} />
                            )}
                        </div>
                        <div className={styles.uploadButton}>
                            <Icon type="plus" />
                            上传证件照
                        </div>
                    </div>
                </UploadOss>
            </Fragment>
        );
    }
);

export default AvatarUpload;
